<!DOCTYPE html>
<!--
Copyright 2016 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->

<link rel="import" href="/components/paper-toast/paper-toast.html">
<dom-module is="toplevel-toast">
  <template>
    <style>
      .error {
        color: #dd4b39;
        font-weight: bold;
      }
      a {
        color: #eeff41;
        font-weight: bold;
        text-decoration: none;
      }
    </style>
    <paper-toast id="toast" text={{text}} duration="10000">
      <div id="content"></div>
    </paper-toast>
  </template>
</dom-module>
<script>
'use strict';
Polymer({
  is: 'toplevel-toast',
  ready() {
    document.addEventListener(
        'display-toast', this.displayToast.bind(this));
  },
  displayToast(event) {
    const detail = event.detail;
    Polymer.dom.flush();
    // We use a window.requestAnimationFrame here because the content div
    // may be generated by a template update, and the template update may
    // not have occurred by the time this event fires.
    window.requestAnimationFrame(function() {
      this.text = detail.text;
      const content = Polymer.dom(this.$.content);
      for (let i = content.childNodes.length - 1; i >= 0; i--) {
        content.removeChild(content.childNodes[i]);
      }
      if (detail.content) {
        content.appendChild(detail.content.cloneNode(true));
      }
      if (detail.error) {
        Polymer.dom(this.$.toast).classList.add('error');
      } else {
        Polymer.dom(this.$.toast).classList.remove('error');
      }
      this.$.toast.show();
    }.bind(this));
  }
});
</script>
